<template>
  <view class="main">

    <view class="content">
      <view class="top">
        <view class="dispaly-line-center">
          <view class="one-cate dispaly-center">
            <view class="one-cate-item" v-for="(item, index) in cateList" :key="index"
                  @click="clickCateItem(item, index)">
              <view class="cate-bg">
                <image src="/static/icon/j-ac-cate.png" mode="aspectFill" v-if="index == current"/>
                <image src="/static/icon/j-cate.png" mode="aspectFill" v-else/>
                <view class="txt dispaly-align-center">{{ item.name }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="cate">
          <view class="cate-box">
            <view class="cate-img">
              <image src="/static/image/sort-bg.png" mode="aspectFill"/>
            </view>
            <view class="sort">
              <view class="sort-item dispaly-center" v-for="(item, index) in sortList" :key="index">
                <view class="s dispaly-center">
                  <view class="s-left">{{ item.name }}</view>
                  <view class="s-right">
                    <image src="/static/image/sort.png" mode="aspectFill"/>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="order-list" :style="{marginTop: cateHeight + 'px'}">
        <view class="order-item" v-for="(item, index) in 10" :key="index" @click="$goUrl(`/subPackage/index/takeOrdersDetail?id=${index}`)">
          <view class="user dispaly-just-between">
            <view class="info dispaly-center">
              <view class="avatar ">
                <image
                    src=""
                    mode="aspectFill"/>
                <image class="q" src="/static/icon/q.png" mode="aspectFill"/>
              </view>
              <view class="name">刘海柱</view>
            </view>
            <view class="user-id">ID9987</view>
          </view>
          <view class="name">超市买一瓶洗洁精</view>
          <view class="time-box dispaly-center">
            <view class="time-icon">
              <image src="/static/icon/time.png" mode="aspectFill"/>
            </view>
            <view class="time-txt">04-28 13:00 至 04-28 13:00</view>
          </view>
          <view class="desc over-2">描述描述描述描述描述描述描述描述描述描述描述描述描述
            描述描述描述描述描述描述描述描述描述描述
          </view>
          <view class="money-box dispaly-just-between">
            <view class="money-left">50.00</view>
            <view class="money-right">
              <image src="/static/icon/bf.png" mode="aspectFill"/>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {getElementHeight} from '@/utils/util'
import {ref, onMounted} from 'vue';

const sortList = ref([
  {name: '时间', type: 1},
  {name: '价格', type: 2},
])

const cateList = ref([
  {name: '全部', id: ''},
  {name: '跑腿', id: 1},
  {name: '代替', id: 2},
  {name: '其他', id: 3},
])

const current = ref(0)
const clickCateItem = (item, index) => {
  current.value = index
}
// 获取元素高度
const cateHeight = ref(0)
onMounted(async () => {
  const res = await getElementHeight('.top')
  cateHeight.value = res
})
</script>

<style lang="scss" scoped>
$i-height: 68rpx;
$i-width: 692rpx;
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffbf0f;

  .one-cate {
    .one-cate-item {
      .cate-bg {
        width: 178rpx;
        height: 82rpx;
        position: relative;

        image {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          width: 178rpx;
          height: 82rpx;
        }

        .txt {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          width: 178rpx;
          height: 82rpx;
          font-family: IPix;
          font-size: 30rpx;
          color: #4E3B0C;
        }
      }
    }
  }
}

.content {
  .cate {
    padding: 0 22rpx;

    .cate-box {
      position: relative;

      .cate-img {
        image {
          width: 100%;
          height: 78rpx;
        }
      }

      .sort {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        top: 20%;
        right: 40rpx;

        .sort-item:last-child {
          margin-right: 0;
        }

        .sort-item {
          margin-right: 60rpx;

          .s {
            .s-left {
              font-family: IPix;
              font-size: 28rpx;
              color: #4E3B0C;
              margin-right: 10rpx;
            }

            .s-right {
              image {
                width: 22rpx;
                height: 30rpx;
              }
            }
          }
        }
      }
    }
  }
}

.order-list {
  padding: 22rpx;

  .order-item:last-child {
    margin-bottom: 0;
  }

  .order-item {
    margin-bottom: 28rpx;
    border: 6rpx solid #4e3b0c;
    padding: 24rpx;
    background-color: #ffd257;

    .name {
      font-family: IPix;
      font-size: 28rpx;
      color: #000000;
      margin: 30rpx 0 15rpx 0;
    }

    .user {
      .info {
        .avatar {
          margin-right: 20rpx;
          border: 1rpx solid #FFFFFF;
          border-radius: 50%;
          width: 74rpx;
          height: 74rpx;
          position: relative;

          .q {
            width: 74rpx;
            height: 74rpx;
          }

          image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 74rpx;
            height: 74rpx;
            border-radius: 50%;
          }
        }

        .name {
          font-family: IPix;
          font-size: 22rpx;
          color: #000000;
        }
      }

      .user-id {
        font-family: IPix;
        font-size: 22rpx;
        color: #000000;
      }
    }

    .time-box {
      .time-icon {
        margin-right: 13rpx;

        image {
          width: 22rpx;
          height: 22rpx;
        }
      }

      .time-txt {
        font-family: IPix;
        font-size: 22rpx;
        color: #000000;
      }
    }

    .desc {
      margin: 18rpx 0;
      font-family: IPix;
      font-size: 24rpx;
      color: #000000;
      line-height: 36rpx;
    }

    .money-box {
      .money-left {
        font-family: IPix;
        font-size: 32rpx;
        color: #000000;
        font-weight: 900;
      }

      .money-right {
        image {
          width: 58rpx;
          height: 58rpx;
        }
      }
    }
  }
}
</style>